import React, {useState, useEffect} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
import {SkeletonScreen} from './index';

// 定义 BaseView 的 Props 类型
interface BaseViewProps {
  children?: React.ReactNode;
  isLoading?: boolean;
  isError?: boolean;
  reload?: () => void;
}

const LHLBaseView: React.FC<BaseViewProps> = ({
  children,
  isLoading = true,
  isError = false,
  reload,
}) => {
  if (isLoading) {
    return (
      <View style={styles.container}>
        <SkeletonScreen count={20} />
      </View>
    );
  }

  if (isError) {
    return (
      <View style={styles.container}>
        <Text>发生错误</Text>
        <Button title="刷新" onPress={reload} />
      </View>
    );
  }

  return <View style={styles.container}>{children}</View>;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    fontSize: 18,
    color: '#888',
  },
  errorText: {
    fontSize: 18,
    color: 'red',
    marginBottom: 20,
  },
});

export default LHLBaseView;
